<template>
  <div>
    <ul>
      <li v-for="product in products">
        {{product.name}}:
        ￥{{product.price}}
        <button 
          @click="addToCart(product)"
          :disabled="product.inventory <= 0"
        >放入购物车</button>
        <span v-if="product.inventory <= 0">售罄</span>
      </li>
    </ul>
    <!-- {{productInCart}} -->
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      products: [],
      productInCart: null
    }
  },

  mounted() {
    axios.get('/public/data.json')
      .then((result) => {
        this.products = result.data
      })
      .catch((err) => {
        console.log(err)
      })
  },

  methods: {
    addToCart(product) {
      this.$emit('receiveProduct', product)
      product.inventory--
      // this.productInCart = product
    }
  },
}
</script>

<style lang='stylus' scoped>

</style>